<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="renderer" content="webkit">
    <meta content="歪秀购物, 购物, 大家电, 手机" name="keywords">
    <meta content="歪秀购物，购物商城。" name="description">
    <title>我的购物车</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/myFile/imgold/icon/favicon.ico}">
    <link rel="stylesheet" type="text/css" th:href="@{/theme/css/base.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/theme/css/member.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/theme/css/home.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">

    <script type="text/javascript" th:src="@{/theme/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/theme/js/searchToPage.js}"></script>
    <script type="text/javascript" th:src="@{/theme/js/paging.js}"></script>

    <script>


        function logout() {
            $.ajax({
                url: "/user/logout",
                dataType: "json",
                data: {},
                async: false,
                success: function (data) {
                    if (data["result"] == "ok") {
                        layer.msg('退出成功', {time: 1000}, function () {
                            window.location = "index";
                        });
                    } else if (data["result"] == "fail") {
                        layer.msg('您还没有登录哦~', {time: 1000}, function () {
                            window.location.reload();
                        });
                    }
                },
                type: "post"
            });
        }

        $(function () {
            (function (a) {
                a.fn.hoverClass = function (b) {
                    var a = this;
                    a.each(function (c) {
                        a.eq(c).hover(function () {
                            $(this).addClass(b)
                        }, function () {
                            $(this).removeClass(b)
                        })
                    });
                    return a
                };
            })(jQuery);

            $(function () {
                $("#pc-nav").hoverClass("current");
            });
            $("#H-table li").each(function (i) {
                $(this).click((function (k) {
                    var _index = k;
                    return function () {
                        $(this).addClass("cur").siblings().removeClass("cur");
                        $(".H-over").hide();
                        $(".H-over:eq(" + _index + ")").show();
                    }
                })(i));
            });
            $("#H-table1 li").each(function (i) {
                $(this).click((function (k) {
                    var _index = k;
                    return function () {
                        $(this).addClass("cur").siblings().removeClass("cur");
                        $(".H-over1").hide();
                        $(".H-over1:eq(" + _index + ")").show();
                    }
                })(i));
            });
        });

        function checkAll(check) {
            var ck = $(".ck");
            if (check.checked) {
                for (var i = 0; i < ck.length; i++) {
                    ck[i].checked = true;
                }
            } else {
                for (var i = 0; i < ck.length; i++) {
                    ck[i].checked = false;
                }
            }
        }

        function toPay() {
            var allCheckCartId = "";
            var specificationId = $(".ck");
            var arrayi = 0;
            var isChecked = false;
            for (var i = 0; i < specificationId.length; i++) {
                if (specificationId[i].checked) {
                    isChecked = true;
                    allCheckCartId = allCheckCartId + specificationId[i].name + ",";
                    arrayi++;
                }
            }
            allCheckCartId = allCheckCartId.substring(0, allCheckCartId.length - 1);

            window.location = "myOrdersFill?allCheckCartId=" + allCheckCartId;
        }

        function collectChecked() {
            var allCheckId = "";
            var specificationId = $(".ck");
            var arrayi = 0;
            var isChecked = false;
            for (var i = 0; i < specificationId.length; i++) {
                if (specificationId[i].checked) {
                    isChecked = true;
                    allCheckId = allCheckId + specificationId[i].id + ",";
                    arrayi++;
                }
            }
            allCheckId = allCheckId.substring(0, allCheckId.length - 1);
            if (isChecked) {
                console.log(allCheckId);
                $.ajax({
                    url: "/collect/CheckedAddCommodityCollect",
                    dataType: "json",
                    data: {"allCheckId": allCheckId},
                    async: false,
                    success: function (data) {
                        if (data["result"] == "ok") {
                            layer.msg('收藏成功', {time: 1000}, function () {
                            });
                        } else if (data["result"] == "fail") {
                            layer.msg('收藏失败,共' + data["all"] + '条记录，' + data["errors"] + '条添加失败！', {time: 1000}, function () {
                            });
                        } else if (data["result"] == "exit") {
                            layer.msg('收藏成功,共' + data["all"] + '条记录，' + data["haves"] + '条已存在！', {time: 1000}, function () {
                            });
                        } else if (data["result"] == "noSession") {
                            layer.msg('登录失效，请重新登录', {time: 1000}, function () {
                                window.location = "login";
                            });
                        } else if (data["result"] == "isNull") {
                            layer.msg('您还未做任何选择', {time: 1000}, function () {
                            });
                        } else {
                            layer.msg('系统错误', {time: 1000}, function () {
                                window.location.reload();
                            });
                        }
                    },
                    type: "post"
                });
            } else {
                layer.msg('您还未做任何选择', {time: 1000}, function () {
                });
            }
        }

        function delChecked() {
            var allCheckId = "";
            var cartsId = $(".ck");
            var arrayi = 0;
            var isChecked = false;
            for (var i = 0; i < cartsId.length; i++) {
                if (cartsId[i].checked) {
                    isChecked = true;
                    allCheckId = allCheckId + cartsId[i].name + ",";
                    arrayi++;
                }
            }
            allCheckId = allCheckId.substring(0, allCheckId.length - 1);
            if (isChecked) {
                console.log(allCheckId);
                layer.confirm('确定要删除所选记录吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: "/cart/delCheckedCart",
                        dataType: "json",
                        data: {"allCheckId": allCheckId},
                        async: false,
                        success: function (data) {
                            if (data["result"] == "ok") {
                                layer.msg('删除成功', {time: 1000}, function () {
                                    window.location.reload();
                                });
                            } else if (data["result"] == "fail") {
                                layer.msg('删除失败', {time: 1000}, function () {
                                    window.location.reload();
                                });
                            } else if (data["result"] == "noSession") {
                                layer.msg('登录失效，请重新登录', {time: 1000}, function () {
                                    window.location = "login";
                                });
                            } else if (data["result"] == "isNull") {
                                layer.msg('您还未做任何选择', {time: 1000}, function () {
                                });
                            } else {
                                layer.msg('系统错误', {time: 1000}, function () {
                                    window.location.reload();
                                });
                            }
                        },
                        type: "post"
                    });
                }, function () {
                    layer.msg('已取消', {time: 1000});
                });
            } else {
                layer.msg('您还未做任何选择', {time: 1000}, function () {
                });
            }

        }


        function countAdd(cartId) {
            var count = $("#" + cartId).val();

            count++;
            $.ajax({
                url: "/cart/comodityCountChange",
                dataType: "json",
                data: {"cartId": cartId, "count": count},
                async: false,
                success: function (data) {
                    if (data["result"] == "ok") {
                        window.location.reload();
                    } else if (data["result"] == "fail") {
                        window.location.reload();
                    } else if (data["result"] == "noSession") {
                        layer.msg('登录失效，请重新登录', {time: 1000}, function () {
                            window.location = "login";
                        });
                    } else {
                        layer.msg('系统错误', {time: 1000}, function () {
                            window.location.reload();
                        });
                    }
                },
                type: "post"
            });

        }

        function countMin(cartId) {
            var count = $("#" + cartId).val();
            if (count > 1) {
                count--;
                $.ajax({
                    url: "/cart/comodityCountChange",
                    dataType: "json",
                    data: {"cartId": cartId, "count": count},
                    async: false,
                    success: function (data) {
                        if (data["result"] == "ok") {
                            window.location.reload();
                        } else if (data["result"] == "fail") {
                            window.location.reload();
                        } else if (data["result"] == "noSession") {
                            layer.msg('登录失效，请重新登录', {time: 1000}, function () {
                                window.location = "login";
                            });
                        } else {
                            layer.msg('系统错误', {time: 1000}, function () {
                                window.location.reload();
                            });
                        }
                    },
                    type: "post"
                });
            }
        }

        function collectOne(commodityId) {
            $.ajax({
                url: "/collect/addByCommodityIdCollect",
                dataType: "json",
                data: {"commodityId": commodityId},
                async: false,
                success: function (data) {
                    if (data["result"] == "ok") {
                        layer.msg('收藏成功', {time: 1000}, function () {
                            window.location.reload();
                        });
                    } else if (data["result"] == "fail") {
                        layer.msg('收藏失败', {time: 1000}, function () {
                            window.location.reload();
                        });
                    } else if (data["result"] == "noSession") {
                        layer.msg('登录失效，请重新登录', {time: 1000}, function () {
                            window.location = "login";
                        });
                    } else if (data["result"] == "exit") {
                        layer.msg('该商品已经在您的收藏夹里了哦~', {time: 1000}, function () {
                        });
                    } else {
                        layer.msg('系统错误', {time: 1000}, function () {
                            window.location.reload();
                        });
                    }
                },
                type: "post"
            });
        }

        function del(cartId) {
            $.ajax({
                url: "/cart/delCart",
                dataType: "json",
                data: {"cartId": cartId},
                async: false,
                success: function (data) {
                    if (data["result"] == "ok") {
                        layer.msg('删除成功', {time: 1000}, function () {
                            window.location.reload();
                        });
                    } else if (data["result"] == "fail") {
                        layer.msg('删除失败', {time: 1000}, function () {
                            window.location.reload();
                        });
                    } else if (data["result"] == "noSession") {
                        layer.msg('登录失效，请重新登录', {time: 1000}, function () {
                            window.location = "login";
                        });
                    } else {
                        layer.msg('系统错误', {time: 1000}, function () {
                            window.location.reload();
                        });
                    }
                },
                type: "post"
            });
        }

    </script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
            var layui_element = layui.element, layui_layer = layui.layer, layui_form = layui.form;
        });
        layui.use('layer', function () {
            layer = layui.layer;
        });

        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage
                , layer = layui.layer;
        });
    </script>

</head>
<body>

 <input type="hidden" id="cartIdNull" th:value="${session.cartIsNull}">
<!--- header begin-->
<header id="pc-header">
    <div class="BHeader">
        <div class="yNavIndex">
            <ul class="BHeaderl">
                <li><a th:if="${session.userId}==null" th:href="@{/login}">请登录</a></li>
                <li class="headerul" th:if="${session.userId}==null">|</li>
                <li><a th:if="${session.userId}==null" th:href="@{/register}">免费注册</a></li>
                <li class="headerul" th:if="${session.userId}==null">|</li>
                <li><a th:href="@{/myOrder?pageNum=1&pageSize=5}" th:if="${session.userId}!=null">我的订单</a></li>
                <li class="headerul" th:if="${session.userId}!=null">|</li>
                <li><a th:href="@{/myCollect?pageNum=1&pageSize=8}" th:if="${session.userId}!=null">我的收藏</a></li>
                <li class="headerul" th:if="${session.userId}!=null">|</li>
                <li id="pc-nav" class="menu" th:if="${session.userId}!=null"><a th:href="@{#}" class="tit">我的淘淘</a>
                    <div class="subnav">
                        <a th:href="@{/accountSecurity}">账户安全</a>
                        <a th:href="@{/myAddress}">地址管理</a>
                        <a th:href="@{/myEvaluate?pageNum=1&pageSize=5}">我的评价</a> <a th:href="@{/viewHistory?pageNum=1&pageSize=5}">浏览记录</a>
                    </div>
                </li>
                <li class="headerul" th:if="${session.userId}!=null">|</li>
                <li th:if="${session.userId}!=null">
                    <a th:text="${session.userName}"></a>
                </li>
                <li th:if="${session.userId}!=null">
                    <img th:src="'/myFile/img/userHeadPic/'+${session.userHead}+''"
                         onclick="javascript:window.location='myInfo'" style=" width:30px;height:30px;">
                    <a href="javascript:logout()" style="float: right;">退出</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container clearfix" style="padding:20px 0 20px ">
        <div class="header-logo fl"><h1><a th:href="@{/index}" style="color:#ea4949;">
            <img th:src="@{/myFile/imgold/icon/logo1.png}" style="width:100px;height:80px;"><strong>淘淘商城</strong></a>
        </h1>
        </div>
        <div class="head-form fl">
            <form class="clearfix">
                <input type="text" class="search-text" id="searchKey" autocomplete="off" placeholder="手机">
                <button type="button" class="button" onclick="searchToPage();">搜索</button>
            </form>
            <div class="words-text clearfix">
                <a th:href="@{#}" class="red">1元秒爆</a>
                <a th:href="@{#}">低至五折</a>
                <a th:href="@{#}">农用物资</a>
                <a th:href="@{#}">买一赠一</a>
                <a th:href="@{#}">佳能相机</a>
                <a th:href="@{#}">稻香村月饼</a>
                <a th:href="@{#}">服装城</a>
            </div>
        </div>
    </div>

</header>
<!-- header End -->

<div class="containers">
    <div class="pc-nav-item"><a th:href="@{/index}">首页</a> &gt; <a th:href="@{#}">我的购物车</a></div>
</div>
<!-- 商城快讯 begin -->
<section id="member">
    <div class="member-center clearfix">
        <div class=" fl">
            <div class="member-head" style="width:1200px;background: #fff;">
                <div class="member-heels fl" style="padding-left:5px;"><h2 style="color:black"><strong>我的购物车</strong>
                </h2></div>
                <div class="member-heels fr">
                    <button class="layui-btn layui-btn-primary" style="flaot:right" onclick="delChecked()">删除选中</button>
                    <button class="layui-btn layui-btn-primary" style="flaot:right" onclick="collectChecked()">收藏选中
                    </button>
                </div>
            </div>
            <div th:if="${cartIsNull}!=null">
                <table class="layui-table" th:if="${cartIsNull}!=null" lay-skin="line"
                       style="width:1200px;padding:10px;text-align: center">
                    <colgroup>
                        <col width="100">
                        <col width="120">
                        <col width="300">
                        <col width="180">
                        <col width="150">
                        <col width="180">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th><input type="checkbox" id="checkOrCancelAll" onclick="checkAll(this)"><label
                                for="checkOrCancelAll" style="text-align: center">全选</label>
                        <th style="text-align: center">商品图片</th>
                        <th style="text-align: center">商品名称</th>
                        <th style="text-align: center">单价</th>
                        <th style="text-align: center">数量</th>
                        <th style="text-align: center">小计</th>
                        <th style="text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="cart : ${allCart}">
                        <td><input type="checkbox" class="ck" th:name="${cart.cartId}" th:id="${cart.commodityId}"></td>
                        <td>
                            <a th:href="'/commodityInfo?commodityId='+${cart.commodityId}+''" >
                                <img th:src="'/myFile/img/commodityPic/'+${cart.picLink}+''" width="90" height="90">
                            </a>
                        </td>
                        <td>
                            <a th:href="'/commodityInfo?commodityId='+${cart.commodityId}+''" style="margin-top:-60px;">
                                商品名：<span th:text="${cart.name}"></span><br/>
                                型号：<span th:text="${cart.typeName}"></span>
                            </a>
                        </td>
                        <td><span>￥</span><span th:text="${cart.price}"></span></td>
                        <td>
                            <a th:href="'javascript:countMin('+${cart.cartId}+');'"><span
                                    style="font-size: 30px;">-</span></a>
                            <input autocomplete="off" th:id="${cart.cartId}" th:name="${cart.commodityId}" type="text"
                                   style="width:30px;" th:value="${cart.commodityCount}"
                                   minnum="1"/>
                            <a th:href="'javascript:countAdd('+${cart.cartId}+');'"><span
                                    style="font-size: 20px;">+</span></a>
                        </td>
                        <td><span>￥</span><span th:text="${cart.sumPrice}"></span></td>
                        <td>
                            <button th:onclick="'javascript:del('+${cart.cartId}+')' "
                                    class="layui-btn layui-btn-primary layui-btn-sm">删除
                            </button>
                            <button th:onclick="'javascript:collectOne('+${cart.commodityId}+')' "
                                    class="layui-btn layui-btn-primary layui-btn-sm">收藏
                            </button>
                        </td>
                    </tr>
                    <tfoot>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td> 共<span th:text="${allCount}" style="line-height:30px;"></span>件商品</td>
                        <td>总计<span th:text="${allPrice}"></span>元</td>
                        <td>
                            <span>
                                <a class="layui-btn" href="javascript: toPay();" style="background:#ea4949;">去结算</a>
                            </span>
                        </td>


                    </tr>
                    </tfoot>
                    </tbody>
                </table>

                <div class="fr pc-search-v">
                    <div class="pc-search-i"style="background: #fff">
                        <div class="fr">
                            <a th:href="'javascript:upPage(\'myCart?'+'\','+${pageNum}+','+${pageSize}+')'"style="background:url(/myFile/imgold/icon/s-a3.png) no-repeat left;color:#ea4949;">上一页</a>
                            <span class="pc-search-t">
<!--                                <b th:text="${pageNum}"></b>-->
                                <input type="text" style="width:50px;height:22px"id="inputpageNum1" th:value="${pageNum}">
                                <em>/</em>
                                <i th:text="${cartPageCount}" ></i>
                            </span>
                            <a  th:href="'javascript:toPage(\'myCart?'+'\','+${pageNum}+','+${pageSize}+','+${cartPageCount}+',\'inputpageNum1\')'"style="background: none">go</a>
                            <a th:href="'javascript:nextPage(\'myCart?'+'\','+${pageNum}+','+${pageSize}+','+${cartPageCount}+')'"style="color:#ea4949;">下一页</a>
                        </div>
                    </div>
                </div>
            </div>
            <div th:if="${cartIsNull}==null">
                <span>您还没有添加商品到购物车哦~</span>

            </div>
        </div>
    </div>
</section>
<!-- 商城快讯 End -->

<!--- footer begin-->
<div class="aui-footer-bot">
    <div class="time-lists aui-footer-pd clearfix">
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img th:src="@{/myFile/imgold/icon/icon-d1.png}"></span>
                <em>消费者权益</em>
            </h4>
            <ul>
                <li><a th:href="@{#}">保障范围 </a></li>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">服务中心 </a></li>
                <li><a th:href="@{#}">服务中心</a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img th:src="@{/myFile/imgold/icon/icon-d2.png}"></span>
                <em>新手上路</em>
            </h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">服务中心 </a></li>
                <li><a th:href="@{#}">服务中心</a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img th:src="@{/myFile/imgold/icon/icon-d3.png}"></span>
                <em>保障正品</em>
            </h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">服务中心 </a></li>
                <li><a th:href="@{#}">服务中心</a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img th:src="@{/myFile/imgold/icon/icon-d1.png}"></span>
                <em>消费者权益</em>
            </h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">服务中心 </a></li>
                <li><a th:href="@{#}">服务中心</a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
            </ul>
        </div>
    </div>
    <div style="border-bottom:1px solid #dedede"></div>
    <div class="time-lists aui-footer-pd time-lists-ls clearfix">
        <div class="aui-footer-list clearfix">
            <h4>购物指南</h4>
            <ul>
                <li><a th:href="@{#}">保障范围 </a></li>
                <li><a th:href="@{#}">购物流程</a></li>
                <li><a th:href="@{#}">会员介绍 </a></li>
                <li><a th:href="@{#}">生活旅行</a></li>
                <li><a th:href="@{#}"> 常见问题 </a></li>
                <li><a th:href="@{#}"> 联系客服购物指南 </a></li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>特色服务</h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">服务中心 </a></li>
                <li><a th:href="@{#}">服务中心</a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>帮助中心</h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">服务中心 </a></li>
                <li><a th:href="@{#}">服务中心</a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>新手指导</h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">退货退款流程</a></li>
                <li><a th:href="@{#}">服务中心 </a></li>
                <li><a th:href="@{#}">服务中心</a></li>
                <li><a th:href="@{#}">服务中心</a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
                <li><a th:href="@{#}"> 更多特色服务 </a></li>
            </ul>
        </div>
    </div>
</div>
<!-- footer End -->

</body>
</html>